import { Router, Route, Redirect, Switch } from 'react-router-dom'

import { history } from '@/utils'
import { KeepAlive } from './components/KeepAlive'

import Login from './pages/Login'
import Layout from './pages/Layout'
import ProfileEdit from './pages/Profile/Edit'
import Search from './pages/Search'
import SearchResult from './pages/Search/Result'
import Article from './pages/Article'
import ProfileChat from './pages/Profile/Chat'
import NotFound from './pages/NotFound'

const App = () => {
  return (
    <Router history={history}>
      <div className="app">
        <KeepAlive activePath="/home" exact path="/home">
          <Layout />
        </KeepAlive>
        <Switch>
          <Route
            exact
            path="/"
            render={() => <Redirect to="/home/index" />}
          ></Route>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/profile/edit">
            <ProfileEdit />
          </Route>
          <Route exact path="/search">
            <Search />
          </Route>
          <Route path="/search/result">
            <SearchResult />
          </Route>
          <Route path="/article/:id">
            <Article />
          </Route>
          <Route path="/chat">
            <ProfileChat />
          </Route>

          {/* 放在路由配置的最后，用来在路由不存在时，展示 404 页面 */}
          {/* path="*" 表示匹配所有路由 */}
          <Route
            path="*"
            render={props => {
              // 注意：此处需要将 /home 排除掉，因为 Home 对应的路由没有放在 Switch 中
              //      所以，路由匹配时，会全部匹配一次，当匹配到 Switch 内部时，此处，就会匹配成功
              //      而我们不希望此处的 * 来匹配 Home
              //      因此，此处将 /home 排除掉
              if (props.location.pathname.startsWith('/home')) {
                return null
              }
              return <NotFound />
            }}
          ></Route>
        </Switch>
      </div>
    </Router>
  )
}

export default App
